<template>
  <view class="p-pop-x">
    <view class="_header">
      <view :style="[barStyle]" class="_bar" />
      <div class="_title">
        <view class="_close" @click="handleCancel">
          <x-icon name="icon-025" color="#000000" size="38"/>
        </view>
      </div>
    </view>
    <view class="_content">
      <view class="_img">
        <x-image src="/assets/images/x-pay-cancel-remind.png"/>
      </view>
      <view class="_title">
        将要访问 {{ config.appName }} 小程序
      </view>
      <view class="_tips">
        {{ config.appName }} 小程序近期受到大量用户好评，平台将
        发放下单补贴{{ detail.totalDiscountAmount }}元，还剩最后19份。
      </view>
    </view>
    <view class="_bottom" @click="handleConfirm">
      立即领取
    </view>
  </view>
</template>

<script>
import config from '@/config';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'PPop4',
  components: {
    XImage,
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      config,
      barStyle: {
        'height': `${uni.getWindowInfo().statusBarHeight}px`
      }
    };
  },
  methods: {
    handleCancel() {
      this.$emit('close');
      this.$XTrack('onDiscountPayCancelClick');
    },
    handleConfirm() {
      this.$emit('submit');
      // 振动
      wx.vibrateLong();
      this.$XTrack('onDiscountPayClick');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    width: 750px; height: 100vh; background-color: #fff; padding-top: 260px;
    ._header{
      position: absolute; left: 0; top: 0;
      ._title{ padding: 0 20px; height: 88px; display: flex; align-items: center;}
    }
    ._content{
      ._img{
        margin: 0 auto;
        width: 150px;
        height: 150px;
      }
      ._title{
        margin-top: 100px;
        font-size: 38px;
        line-height: 54px;
        text-align: center;
        color: #323232;
        font-weight: bold;
      }
      ._tips{
        margin-top: 44px;
        padding: 0 30px;
        font-size: 32px;
        line-height: 56px;
        text-align: center;
        color: #323232;
      }
    }
    ._bottom{
      width: 702px;
      height: 90px;
      margin: 68px auto;
      background: #F7F7F7;
      border: 1px solid #D3D3D3;
      border-radius: 10px;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #323232;
    }
  }
</style>
